<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
</head>

<body style="padding: 15px;">

    <div class="panel  panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">添加新图书</div>
        <div class="panel-body  ">

            <form class="form-inline">
                <div class="form-group">

                    <div class="input-group">
                        <div class="input-group-addon">书名</div>
                        <input type="text" class="form-control" id="name" placeholder="请输入书名">
                    </div>
                    <div class="input-group">
                        <div class="input-group-addon">作者</div>
                        <input type="text" class="form-control" id="author" placeholder="请输入作者名">
                    </div>
                    <div class="input-group">
                        <div class="input-group-addon">出版社</div>
                        <input type="text" class="form-control" id="publisher" placeholder="请输入出版社名">
                    </div>
                </div>
                <button type="button" class="btn btn-primary addBtn">提交</button>
            </form>


        </div>

    </div>
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>名称</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        $(function() {
            function loadPage() {
                $.ajax({
                    type: 'GET',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    success: function(res) {
                        var arr = [];
                        var data = res.data;
                        $(data).each(function(i, ele) {
                                console.log(i, ele);
                                arr.push(`
                            <tr>
                            <td>${this.id}</td>
                            <td>${this.bookname}</td>
                            <td>${this.author}</td>
                            <td>${this.publisher}</td>
                            <td class='del' data-id='${this.id}'>删除</td>                                                 
                            </tr>
                            `)
                            })
                            // console.log(arr);
                            // console.log(data);
                        $('tbody').empty().append(arr.join(''));
                    }
                })
            }
            loadPage();
            $('.addBtn').click(function() {
                var bookname = $('#name').val();
                var author = $('#author').val();
                var publisher = $('#publisher').val();
                if (bookname === '' || author === '' || publisher === '') {
                    alert('内容不能为空！');
                }
                $.ajax({
                    type: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: {
                        bookname: bookname,
                        author: author,
                        publisher: publisher,

                    },
                    success: function(res) {
                        if (res.status !== 201) {
                            return alert('添加图书失败')
                        }
                        $('#name').val('');
                        $('#author').val('');
                        $('#publisher').val('');
                        loadPage();
                    }

                })
            })
            $('tbody').on('click', '.del', function() {
                var id = $(this).data('id');
                $.get('http://www.liulongbin.top:3006/api/delbook', {
                    id: id
                }, function(res) {
                    if (res.status !== 200) return alert('删除图书失败！')
                    loadPage();
                })
            })
        })
    </script>
</body>

</html>